<template>
    <view class="message" :style=" { paddingTop: paddingHeight + 'px' } ">
        <nav-bar title="消息"></nav-bar>
        <u-list @scrolltolower=" scrolltolower ">
            <view class="title">
                <u-tabs :list="tabsList" @click="handleclickTabs"></u-tabs>
                <image class="bg-img" 
							src="http://oss.antaimedical.com/images/pro/2024/10/671f2bcbe4b0d615350f30a5Q2w5YGoBIBf28175ee40296047d638ebf9d45392ecec.png"
							></image>
            </view>
            <u-list-item v-for="(item, index) in msgList" :key=" index ">
                <view class="card" @click="toDetail(item)" v-if="tabIndexId == 1">
                    <view class="card-content-l">
                        <view class="header">
                            <view
                                class="header-l"
                            >
                                <view :class="{'red-dot': item.redDot==0}"></view>
                                <text>
                                    {{ isReply[item.isReply] }}
                                </text>
                            </view>
                            <view class="header-r">
                                <text v-if="item.replyTime">{{ item.replyTime }}</text>
                            </view>
                        </view>
                        <view class="item">
                            <text>意见编号</text>
                            <text class="text2">{{ item.feedbackNum }}</text>
                        </view>
                        <view class="item">
                            <text>意见类型</text>
                            <text class="text2">{{ item.typeName }}</text>
                        </view>
                        <view class="item">
                            <text>意见板块</text>
                            <text class="text2">{{ item.moduleName }}</text>
                        </view>
                        <view class="item">
                            <text>意见日期</text>
                            <text class="text2">{{ item.createTime }}</text>
                        </view>
                    </view>
                </view>
                <view class="card" @click="tosystemMsgDetail(item)" v-else>
                    <view class="card-content-l">
                        <view class="header">
                            <view
                                class="header-l"
                            >
                                <view :class="{'red-dot': item.redDot==0}"></view>
                                <text>
                                    通知
                                </text>
                            </view>
                            <view class="header-r">
                                <text v-if="item.createTime">{{ item.createTime }}</text>
                            </view>
                        </view>
                        <view class="item">
                            <text>类型</text>
                            <text class="text2">{{ item.typeName }}</text>
                        </view>
                        <view class="item">
                            <text>板块</text>
                            <text class="text2">{{ item.moduleName }}</text>
                        </view>
                    
                    </view>
                </view>
            </u-list-item>
            <view class="noneBox" v-if="!msgList.length"></view>
            <view class="bottom-box" @click="goBack">
                <view class="text">如需人工处理，可以在【我的】菜单中，点击【联系客服】获取客服企业微信</view>
                <view class="bottom-btn">返回</view>
            </view>
        </u-list>
    </view>
</template>

<script>
import {
    findUserFeedbackDetail,findMessagePage,findMessageRedDot
} from '@/api/index.js'
import {
    mapGetters
} from 'vuex'
export default {
    data () {
        return {
            paddingHeight: uni.getStorageSync('navbarHeight'),
            imgUrl: this.$imgUrl,
            userId: uni.getStorageSync('userId'),
            pageParams: {
                page: 1,
                size: 7,
                userId: uni.getStorageSync('userId'),
            },
            msgList: [],
            tabsList: [
                {
                    id:1,
                    name: '客服消息',
                }, 
                {
                    id:2,
                    name: '通知消息',
                    badge: {
                        value: 0,
                    }
                }
                ],
            isReply: {
                0: '未回复',
                1: '已回复',
            },
            tabIndexId:1
        }
    },
    computed: {
        ...mapGetters({
            userInfo: 'getUserInfo'
        }),
    },
    onLoad () {
    },
    onShow () {
        this.pageParams.page = 1
        this.msgList= []
        this.init()
        findMessageRedDot({userId:this.userInfo.userId}).then((res) => {
            this.tabsList[1].badge.value = res.data
        })
    },
    methods: {
        init () {
            if (this.tabIndexId == 1) {
                findUserFeedbackDetail(this.pageParams).then((res) => {
                    this.msgList = [...this.msgList, ...res.data.list]
                    if (res.data.list.length) {
                        this.pageParams.page++
                    }
                })
            }else{
                findMessagePage(this.pageParams).then((res) => {
                    this.msgList = [...this.msgList, ...res.data.list]
                    if (res.data.list.length) {
                        this.pageParams.page++
                    }
                })
            }

        },
        handleclickTabs(val){
            if (val.id !== this.tabIndexId) {
                this.msgList.length = 0
                this.pageParams.page = 1
            }
            this.tabIndexId = val.id
            this.init()
        },
        // 滚动触底加载
        scrolltolower (v) {
            this.init()
        },
        toDetail (item) {
            uni.navigateTo({
                url: `/pagesB/my/message/detail?detailData=${JSON.stringify(item)}`
            })
        },
        tosystemMsgDetail (item) {
            uni.navigateTo({
                url: `/pagesB/my/message/systemMsgDetail?detailData=${JSON.stringify(item)}`
            })
        },
        goBack () {
            uni.navigateBack({
                delta: 1 // 默认值是1，表示回到上一页
            });
        },
    }
}
</script>

<style lang="scss" scoped>
.message {
    padding: 0 48rpx 48rpx;
    background: #e3e8ff;
    /deep/.u-list{
        position: relative;
        .u-list-item-{
            position: relative;
            z-index: 2;
        }
    }
    .title {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 48rpx;
        color: #333333;
        margin: 48rpx 0 32rpx 0;
        text-align: left;
        position: relative;
        .bg-img{
            width: 200rpx;
            height: 200rpx;
            position: absolute;
            right: 0;
            top: -32rpx;
            z-index: 1;
        }
    }

    .card {
        background: rgba($color: #ffffff, $alpha: .9);
        border-radius: 24rpx 24rpx 24rpx 24rpx;
        padding: 32rpx;
        margin-top: 32rpx;
        display: flex;
        justify-content: center;
        align-items: space-between;
        .header {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-bottom: 24rpx;
            border-bottom: 2rpx solid #e6ebf5;
            .header-l {
                font-family: PingFang SC, PingFang SC;
                font-weight: 600;
                font-size: 28rpx;
                display: flex;
                justify-content: center;
                align-items: center;
                .red-dot {
                    display: inline-block;
                    width: 18rpx;
                    height: 18rpx;
                    background-color: red;
                    border-radius: 50%;
                    margin-right: 12rpx;
                }
            }
            .header-r {
                font-family: PingFang SC, PingFang SC;
                font-weight: 600;
                font-size: 28rpx;
                color: #333333;
            }
        }
        .card-content-l {
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            .item {
                display: flex;
                justify-content: space-between;
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 28rpx;
                color: #666666;
                padding-top: 32rpx;
                .text2 {
                    font-weight: 600;
                    color: #333333;
                }
            }
        }

    }
    .noneBox{
        height: calc(100vh - 600rpx);
    }
    .bottom-box{
        margin-top: 52rpx;
        .text{
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 24rpx;
            color: #666666;
            text-align: left;
        }
        .bottom-btn{
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 88rpx;
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 32rpx;
            color: #FFFFFF;
            background: #545DDE;
            border-radius: 32rpx 32rpx 32rpx 32rpx;
            margin-top: 10rpx;
        }
    }
}
</style>